<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>HLS测试</title>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<div>
    <video id="video"
           class="video-js vjs-default-skin vjs-big-play-centered" controls
           preload="auto" autoplay="autoplay" width="500" height="400"
           data-setup='{}'>
    </video>
</div>
<div>
    <h3>1.地址注册</h3>
    <p>
        <label>源地址:</label>
        <input type="text" size="120" value="rtsp://wowzaec2demo.streamlock.net/vod/mp4" id="sourceUrl"/>
        <input type="button" onclick="register()" value="注册"/>
    </p>
    <p><label>编码:</label><label id="keyText"></label></p>
</div>
<div>
    <h3>2.播放HLS流</h3>
    <input type="text" size="120" value="" id="hlsUrl"/>
    <input type="button" onclick="playHls()" value="播放"/>
</div>
<script type="text/javascript">
    var baseUrl = window.location.href.split("/static/")[0];

    function register() {
        var sourceUrl = $("#sourceUrl").val() || '';
        if (sourceUrl == '') {
            alert("源地址不能为空!");
            return;
        }
        var url = baseUrl + "/converter/register";
        $.post(url, {url: sourceUrl,format:"hls"}, function (json) {
            if (json.status == 200) {
                var key = json.data;
                $("#keyText").text(key);
                $("#key").val(key);
                $("#hlsUrl").val(baseUrl+"/live/"+key+"/play.m3u8");
            } else {
                alert("错误:" + json.message);
            }
        });
    }


    function playHls() {
        var url = $("#hlsUrl").val() || '';
        if (url == '') {
            alert("请输入hls流播放地址!");
            return;
        }
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    }
</script>
</body>
</html>